<template>
  <div class="singerWrap" ref="singerWrap">
    <ul>
      <li v-for="singGroup in singersList">
        <h3 class="groupTitle">{{singGroup.title}}</h3>
        <ul>
          <li class="singer" v-for="singer in singGroup.items">
            <a :href=" singer.url">
              <div class="avatar"><img v-lazy="singer.avatar"/></div>
              <p class="desc">{{singer.name}}</p>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getSingers} from 'api/recommend';
  import BScroll from 'better-scroll';
  const HOT_NAME = '热门';
  const HOT_NAME_LEN = 10;
  export default {
    data () {
      return {
        singersList: []
      };
    },
    components: {},
    mounted () {
      this._getSingers();
      setTimeout(() => {
        this.scroll = new BScroll(this.$refs.singerWrap, {
          click: true
        });
      }, 500);
    },
    methods: {
      _getSingers () {
        getSingers().then((res) => {
          this.singersList = this._formatSingerList(res.data.list);
          console.log(this.singersList);
        });
      },
      _formatSingerList (list) {
        let map = {
          hot: {
            title: HOT_NAME,
            items: []
          }
        };
        list.forEach((item, index) => {
          if (index < HOT_NAME_LEN) {
            map.hot.items.push({
              name: item.Fsinger_name,
              id: item.Fsinger_mid,
              url: `https://y.qq.com/n/yqq/singer/${item.Fsinger_mid}.html`,
              avatar: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${item.Fsinger_mid}.jpg?max_age=2592000`
            });
          }
          const key = item.Findex;
          if (!map[key]) {
            map[key] = {
              title: key,
              items: []
            };
          } else {
            map[key].items.push({
              name: item.Fsinger_name,
              id: item.Fsinger_mid,
              url: `https://y.qq.com/n/yqq/singer/${item.Fsinger_mid}.html`,
              avatar: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${item.Fsinger_mid}.jpg?max_age=2592000`
            });
          }
        });
        let HOT_ARR = [];
        let ELSE_ARR = [];
        for (let k in map) {
          if (map[k].title.match(/[a-zA-Z]/)) {
            ELSE_ARR.push(map[k]);
          } else if (map[k].title === HOT_NAME) {
            HOT_ARR.push(map[k]);
          }
        }
        ELSE_ARR = ELSE_ARR.sort((a, b) => {
          return a.title.charCodeAt(0) - b.title.charCodeAt(0);
        });
        return HOT_ARR.concat(ELSE_ARR);
      }
    }
  };
</script>
<style lang='scss'>
  @import "../../common/scss/variable";

  .singerWrap {
    position: fixed;
    width: 100%;
    top: 80px;
    bottom: 0;
    z-index: -1;
    .groupTitle {
      padding: 5px 0 5px 15px;
      font-size: $font-size-medium;
      color: $color-text-d;
      background: $color-highlight-background;
    }
    .singer {

      padding: 10px 30px;
      a {
        display: flex;
        /*justify-content: left;*/
        align-items: center;
        width: 100%;
        height: 100%;
        .avatar {
          flex: 0 0 60px;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 60px;
          }
        }
        .desc {
          color: $color-text-d;
          font-size: $font-size-medium-x;
          padding-left: 30px;
        }
      }
    }
  }
</style>
